#include('./header.html',{active:'category', title:'文件管理'})
<link href="//cdn.bootcss.com/dropzone/4.3.0/min/dropzone.min.css" rel="stylesheet">
<style>
    #dropzone {
        margin-bottom: 3rem;
    }
    .dropzone {
        border: 2px dashed #0087F7;
        border-radius: 5px;
        background: white;
    }
    .dropzone .dz-message {
        font-weight: 400;
    }
    .dropzone .dz-message .note {
        font-size: 0.8em;
        font-weight: 200;
        display: block;
        margin-top: 1.4rem;
    }
    .attach-img {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        box-shadow: 0px 0px 8px #333;
    }
    .attach-text {
        font-size: 12px;
        font-weight: 300;
    }
    .attach-img:hover {
        background-color: #f9f9f9;
    }
</style>
<div class="row">
    <div class="col-sm-12">
        <h4 class="page-title">文件管理</h4>
    </div>
    <div class="row">
        <div class="col-md-12 portlets">
            <!-- Your awesome content goes here -->
            <div class="m-b-30">
                <form action="#" class="dropzone" id="dropzone">
                    <div class="fallback">
                        <input name="file" type="file" multiple="multiple">
                    </div>
                    <div class="dz-message">
                        将文件拖至此处或点击上传.
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-12 attach">
        #if(is_empty(attachs))
        <div class="row">
            <div class="col-md-4 text-center">
                <div class="alert alert-warning">
                    目前还没有一个附件呢，你可以上传试试!
                </div>
            </div>
        </div>
        #else

        #for(attach : attachs.list)
        <div class="col-md-2 text-center m-t-10">
            <a href="${site_url(attach.fkey)}" target="_blank">
                <img class="attach-img"
                     src="#if(attach.ftype == 'image') ${attach.fkey} #else /static/admin/images/attach.png #end"
                     title="${attach.fname}"/>
            </a>
            <div class="clearfix m-t-10">
                <span class="attach-text" data-toggle="tooltip" data-placement="top"
                      data-original-title="${attach.fname}">${substr(attach.fname, 12)}</span>
            </div>
            <div class="clearfix">
                <button url="${site_url(attach.fkey)}" type="button"
                        class="btn btn-warning btn-sm waves-effect waves-light m-t-5 copy">
                    <i class="fa fa-copy"></i> <span>复制</span>
                </button>
                <button type="button" class="btn btn-danger btn-sm waves-effect waves-light m-t-5"
                        onclick="delAttach(${attach.id});">
                    <i class="fa fa-trash-o"></i> <span>删除</span>
                </button>
            </div>
        </div>
        #end

        #call pageAdminNav(attachs)

        #end
    </div>
</div>

#include('./footer.html')

<script src="//cdn.bootcss.com/dropzone/4.3.0/min/dropzone.min.js"></script>
<script src="//cdn.bootcss.com/clipboard.js/1.6.0/clipboard.min.js"></script>

<script type="text/javascript">
    $("#dropzone").dropzone({
        url: "/admin/attach/upload",
        init: function () {
            this.on("success", function (file) {
                console.log(file);
                window.location.reload();
            });
        }
    });

    var clipboard = new Clipboard('button.copy', {
        text: function (trigger) {
            return $(trigger).attr('url');
        }
    });

    clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        e.clearSelection();
    });

    function delAttach(id) {
        swal({
            title: '警告信息',
            text: "确定删除这个附件吗？",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        }).then(function () {
            $.post('/admin/attach/delete', {id: id}, function (result) {
                if (result && result.success) {
                    swal('提示信息', '删除成功', 'success');
                    setTimeout(function () {
                        window.location.reload();
                    }, 2000);
                } else {
                    swal("提示消息", result.msg, 'error');
                }
            });
        });
    }
</script>
</body>
</html>